<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--                                                               -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!--                                                               -->
<link id="cssFile" type="text/css" rel="stylesheet" href="IntoGwt.css">
<!--                                           -->
<!-- Any title is fine                         -->
<!--                                           -->
<title>Advanced Suggest Select Box Project</title>

<!--                                           -->
<!-- This script loads your compiled module.   -->
<!-- If you add any GWT meta tags, they must   -->
<!-- be added before this line.                -->
<!--                                           -->
<script type="text/javascript" language="javascript"
	src="intogwttest/intogwttest.nocache.js"></script>
<link
	href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
	rel="stylesheet">
</head>

<!--                                           -->
<!-- The body can have arbitrary html, or      -->
<!-- you can leave the body empty if you want  -->
<!-- to create a completely dynamic UI.        -->
<!--                                           -->
<body style="width: 100%;">

	<div>
		<img alt="http://1vu.fr" src="img/Logo_1VU_entete.png">
	</div>
	<!-- OPTIONAL: include this if you want history support -->
	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
		style="position: absolute; width: 0; height: 0; border: 0"></iframe>

	<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
	<noscript>
		<div
			style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
			Your web browser must have JavaScript enabled in order for this
			application to display correctly.</div>
	</noscript>

	<div style="width: 800px; margin-left: auto; margin-right: auto;">
		<div style="text-align: center; vertical-align: top; height: 60px;">
			<h1 style="padding-bottom: 3px;">Advanced Suggest and Select Box
				Project</h1>
			<h5 style="padding-right: 50px; text-align: right;">Version
				2.1.0</h5>
		</div>

		<div>
			<table style="border-bottom: 1px solid black;">
				<tr>
					<td colspan="2">
						<h3>Advanced Suggest and Select Box :</h3> The <b>DefaultIconedSuggestBox</b>
						is built to support these features:
						<ul>
							<li>Icons in your suggest box and select box</li>
							<li>Use <b>any GWT widgets</b> to display your values inside
								the suggest box: an html table mode is also available for
								multiple columns display mode
							</li>
							<li>Value <b>validation</b> (here for the example purpose we
								check the value length is more than 3 chars)
							</li>
							<li>The <b>Strict mode</b> allows you to use the suggest box
								instead of the combo (select) boxes also
							</li>
							<li>Have your own <b>filtering algorithm</b> that is
								activated as the user types (for an example we added the two
								filtering algos: case sensitive and starts with)
							</li>
							<li>Many styles are added on events like mouse over, element
								selection, matching characters, validation error etc... just
								write your css file and you're done)'
						</ul> In addition, there are some "invisible" features like:
						<ul>
							<li><b>Type safe</b> values</li>
							<li>Decorate your Suggest Box or Select Box with <b>complementary
									information</b> (other that an icon) by extending <b>DefaultSuggestBox</b>
								(the parent class of DefaultIconedSuggestBox) and adding your
								logic directly inside the component
							</li>
							<li>Alternate representations of the <b>choice list</b>
								(You're not obliged to have a popup)
							</li>
							<li>Extended styling in a consistent way on all browsers (in
								opposition to the Select box that is a native component which
								display depends on the browser)</li>
							<li>The architecture is a very clean approach with more than
								10 years of experience in Java technologies, you can get into
								the source code and find what you need very easily</li>
						</ul>
					</td>
				</tr>
				<tr>
					<td style="width: 70%;">
						<h4>Test the Suggest box here and play with the options on
							the right:</h4>
					</td>
					<td style=""><h4>Options:</h4></td>
				</tr>

				<tr>
					<td id="suggestBoxContainer"
						style="vertical-align: top; padding: 10px;"></td>
					<td id="options"></td>
				</tr>
				<tr>
					<td>I chose some of my preferred Google chrome extentions to
						fill the values of this list. Here are the values that you chose</td>
				</tr>
				<tr>
					<td style="color: green; font-weight: bold; padding-top: 5px;"
						id="infoContainer"></td>
				</tr>

				<tr>
					<td style="width: 70%;">
						<h4>Test the Multivalued Suggest box here</h4>
					</td>
					<td style=""><h4>Options:</h4></td>
				</tr>

				<tr>
					<td id="suggestBoxMultiValueContainer"
						style="vertical-align: top; padding: 10px;"></td>
					<td id="options">The same options as the advanced suggest box
						are available. <br>You can define your own styles, layout and
						position (left, right, top, bottom, or outside the box) to
						represent the selected values
					</td>
				</tr>

				<tr>
					<td id="suggestBoxMultiValueLog" colspan="2"
						style="vertical-align: top; padding: 10px; border: 1px solid #bbb; color: green;"></td>
				</tr>

			</table>

			<table align="center" style="width: 800px">
				<tr>
					<td>
						<h3>Selection Panel :</h3>
					</td>
				</tr>
				<tr>
					<td>Alternative to radio boxes, combo boxes and TabBar in both
						vertical and horizontal modes
						<ul>
							<li>You can reuse icons and other components between the
								suggest box and this library</li>
							<li>maxSelected (=2 in this demo) property (default=1)
								limits the simultaneous selected items count in a fifo manner
								(for unlimited set it to -1)</li>
							<li>selected and hover status handled separately with
								additional styles</li>
						</ul>

						<p>
							The <b>Max selected</b> number is the count of maximum allowed
							choices. It behaves like a multichoice select box limited to
							'maxSelected' values
						</p>
						<p>
							The <b>select once 'mode'</b> decides if a value is clicked
							twice, if it has to be present twice in the list of selected
							values. <b>The number of selected items cannot be greater
								that 'maxSelected', increase that number at least to 2 to see
								the mode in action</b>
						</p>
						<p>
							The <b>Toggle 'mode'</b> makes the widget behave as a checkbox:
							it is selected or unselected on each click (as long as the
							maxSelected is not exceeded)
						</p>
					</td>
				</tr>
				<tr>
					<td id="selectionPanel"></td>
					<td id="selectionPanelState" width="20%"></td>
				</tr>
				<tr>
					<td>
						<h3>Selection Panel in a different style:</h3> <br /> here it can
						be used as a replacement for radio and check boxes
					</td>
				</tr>
				<tr>
					<td id="selectionPanel2"></td>
					<td id="selectionPanelState2" width="20%"></td>
				</tr>
				<tr>
					<td>
						<h3>Selection Panel as a range selection widget:</h3>
					</td>
				</tr>
				<tr>
					<td id="selectionPanel3"></td>
					<td id="selectionPanelState3" width="20%"></td>
				</tr>

				<tr style="padding-top: 2em;">
					<td id="selectionPanel4"></td>
					<td id="selectionPanelState4" width="20%"></td>
				</tr>
			</table>

			<table align="center" style="width: 800px">
				<tr>
					<td>
						<h3>State Panel :</h3>
					</td>
				</tr>
				<tr>
					<td>Panel with multiple states. By default, the state toggles
						between two possible states as a button, but the component handles
						<ul>
							<li>multiple states with a manager interface to switch
								between states</li>
							<li>enabled and disabled status handled separately with
								additional styles</li>
						</ul>
					</td>
				</tr>
				<tr>
					<td id="statePanel"></td>
				</tr>
			</table>

			<table align="center" style="width: 800px">
				<tr>
					<td>
						<h3>Comment widget :</h3>
					</td>
				</tr>
				<tr>
					<td>Use this component (CommentWidget) to handle comments, or
						use its superclass (SwitchOnEditWidget) for a more personalized
						experience:</td>
				</tr>
				<tr>
					<td id="commentWidget"></td>
				</tr>
			</table>

			<table align="center" style="width: 800px">
				<tr>
					<td>
						<h3>Advanced Text Box :</h3>
					</td>
				</tr>
				<tr>
					<td>This component is the basic widget of the suggest box.
						<ul>
							<li>Default text with a different style (equivalent to the
								HTML5 placeholder attribute)</li>
							<li>Double click events</li>
						</ul>
					</td>
				</tr>
				<tr>
					<td id="advancedTextBox"></td>
				</tr>
			</table>

			<br /> <br />
			<div style="padding-top: 30px; text-align: center;">
				This demo is for the <a
					href="http://code.google.com/p/advanced-suggest-select-box/">Advanced
					suggest select box</a> project licensed under the Apache2 license
			</div>
		</div>
	</div>

</body>
</html>
